.#{$ns}Picker {
  @include input-text();
  outline: none;

  &.is-focus > &-input {
    border-color: $Form-input-onFocused-borderColor;
    box-shadow: $Form-input-boxShadow;

    @if $Form-input-onFocused-bg !=$Form-input-bg {
      background-color: $Form-input-onFocused-bg;
    }
  }

  &-placeholder {
    color: $Form-input-placeholderColor;
    user-select: none;
    position: absolute;
    // margin-top: 2 * $Form-input-borderWidth;
    line-height: $Form-input-lineHeight;
  }

  &-input {
    min-height: $Form-input-height;
    height: auto;
  }

  .#{$ns}Picker-values {
    display: inline;
  }

  &-valueWrap {
    flex-grow: 1;
    position: relative;

    > input {
      width: 1rem;
      display: inline-block;
    }
  }

  .#{$ns}Picker-valueWrap {
    margin-bottom: -$gap-xs;
    line-height: 1;
  }

  .#{$ns}Picker-value {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    vertical-align: middle;
    line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
    display: inline-block;
    font-size: $Form-selectValue-fontSize;
    color: $Form-selectValue-color;
    background: $Form-selectValue-bg;
    border: px2rem(1px) solid $Form-selectValue-borderColor;
    border-radius: 2px;
    margin-right: $gap-xs;
    margin-bottom: $gap-xs;

    &.is-disabled {
      pointer-events: none;
      opacity: $Button-onDisabled-opacity;
    }
  }

  .#{$ns}Picker-valueIcon {
    cursor: pointer;
    border-right: px2rem(1px) solid $Form-selectValue-borderColor;
    padding: 1px 5px;

    &:hover {
      background-color: darken($Form-selectValue-bg, 5%);
    }
  }

  .#{$ns}Picker-valueLabel {
    padding: 0 $gap-xs;
  }

  &-btn {
    cursor: pointer;
    color: $Picker-iconColor;

    &:hover {
      color: $Picker-onHover-iconColor;
    }
  }

  &-clear {
    display: inline-block;
    @include input-clear();
    line-height: 1;
    margin-right: $gap-xs;
  }
}

.#{$ns}PickerControl.is-inline {
  .#{$ns}Picker {
    display: inline-block;
    min-width: px2rem(150px);
  }
}
